<template>
  <div>
    <div id="container">
      <div class="tags-panel">
        <div class="tags-lines">
          <li class="tags-line">
            <div class="tags-title">品牌</div>
            <ul class="tags">
              <li class="active">
                <a>全部</a>
              </li>
              <li class>
                <a>万达影城</a>
              </li>
              <li class>
                <a>大地影院</a>
              </li>
              <li class>
                <a>博纳国际影城</a>
              </li>
              <li class>
                <a>耀莱成龙国际影城</a>
              </li>
              <li class>
                <a>保利国际影城</a>
              </li>
              <li class>
                <a>华联影城</a>
              </li>
              <li class>
                <a>金逸影城</a>
              </li>
              <li class>
                <a>CGV影城</a>
              </li>
              <li class>
                <a>中影国际影城</a>
              </li>
              <li class>
                <a>沃美影城</a>
              </li>
              <li class>
                <a>魔影国际影城</a>
              </li>
              <li class>
                <a>首都电影院</a>
              </li>
              <li class>
                <a>完美世界影城</a>
              </li>
              <li class>
                <a>百老汇影城</a>
              </li>
              <li class>
                <a>卢米埃影城</a>
              </li>
              <li class>
                <a>华谊兄弟</a>
              </li>
              <li class>
                <a>UME国际影城</a>
              </li>
              <li class>
                <a>中影星美国际影城</a>
              </li>
              <li class>
                <a>星典影城</a>
              </li>
              <li class>
                <a>新华国际影城</a>
              </li>
              <li class>
                <a>美嘉欢乐影城</a>
              </li>
              <li class>
                <a>橙天嘉禾影城</a>
              </li>
              <li class>
                <a>星美国际影城</a>
              </li>
              <li class>
                <a>泰禾影城</a>
              </li>
              <li class>
                <a>幸福蓝海国际影城</a>
              </li>
              <li class>
                <a>环球影城</a>
              </li>
              <li class>
                <a>红星电影世界</a>
              </li>
              <li class>
                <a>唐阁影城</a>
              </li>
              <li class>
                <a>嘉华国际影城</a>
              </li>
              <li class>
                <a>SFC上影影城</a>
              </li>
              <li class>
                <a>万象影城</a>
              </li>
              <li class>
                <a>比高电影城</a>
              </li>
              <li class>
                <a>华影国际影城</a>
              </li>
              <li class>
                <a>中传国际影城</a>
              </li>
              <li class>
                <a>鲁信影城</a>
              </li>
              <li class>
                <a>恒大嘉凯影城</a>
              </li>
              <li class>
                <a>至潮主题影城</a>
              </li>
              <li class>
                <a>东影时代影城</a>
              </li>
              <li class>
                <a>劲松电影院</a>
              </li>
              <li class>
                <a>横店影视</a>
              </li>
              <li class>
                <a>苏宁影城</a>
              </li>
              <li class>
                <a>华夏国际影城</a>
              </li>
              <li class>
                <a>时光影城</a>
              </li>
              <li class>
                <a>明星时代影城</a>
              </li>
              <li class>
                <a>自由人影城</a>
              </li>
              <li class>
                <a>中都影城</a>
              </li>
              <li class>
                <a>百丽宫影城</a>
              </li>
              <li class>
                <a>大料国际影城</a>
              </li>
              <li class>
                <a>中影数字国际影城</a>
              </li>
              <li class>
                <a>太平洋电影城</a>
              </li>
              <li class>
                <a>搜秀影城</a>
              </li>
              <li class>
                <a>其他</a>
              </li>
            </ul>
          </li>
          <li class="tags-line">
            <div class="tags-title">行政区:</div>
            <ul class="tags">
              <li class="active">
                <a>全部</a>
              </li>
              <li class>
                <a>地铁附近</a>
              </li>
              <li class>
                <a>朝阳区</a>
              </li>
              <li class>
                <a>海淀区</a>
              </li>
              <li class>
                <a>丰台区</a>
              </li>
              <li class>
                <a>大兴区</a>
              </li>
              <li class>
                <a>昌平区</a>
              </li>
              <li class>
                <a>西城区</a>
              </li>
              <li class>
                <a>东城区</a>
              </li>
              <li class>
                <a>房山区</a>
              </li>
              <li class>
                <a>通州区</a>
              </li>
              <li class>
                <a>顺义区</a>
              </li>
              <li class>
                <a>怀柔区</a>
              </li>
              <li class>
                <a>石景山区</a>
              </li>
              <li class>
                <a>门头沟区</a>
              </li>
              <li class>
                <a>密云区</a>
              </li>
              <li class>
                <a>平谷区</a>
              </li>
              <li class>
                <a>延庆区</a>
              </li>
            </ul>
          </li>
          <li class="tags-line">
            <div class="tags-title">影厅类型:</div>
            <ul class="tags">
              <li class="active">
                <a>全部</a>
              </li>
              <li class>
                <a>IMAX厅</a>
              </li>
              <li class>
                <a>CGS中国巨幕厅</a>
              </li>
              <li class>
                <a>杜比全景声厅</a>
              </li>
              <li class>
                <a>Dolby Cinema厅</a>
              </li>
              <li class>
                <a>RealD厅</a>
              </li>
              <li class>
                <a>RealD 6FL厅</a>
              </li>
              <li class>
                <a>LUXE巨幕厅</a>
              </li>
              <li class>
                <a>4DX厅</a>
              </li>
              <li class>
                <a>DTS:X 临境音厅</a>
              </li>
              <li class>
                <a>儿童厅</a>
              </li>
              <li class>
                <a>4K厅</a>
              </li>
              <li class>
                <a>4D厅</a>
              </li>
              <li class>
                <a>60帧厅</a>
              </li>
              <li class>
                <a>120帧/4K厅</a>
              </li>
              <li class>
                <a>巨幕厅</a>
              </li>
              <li class>
                <a>CINITY厅</a>
              </li>
              <li class>
                <a>MX4D厅</a>
              </li>
              <li class>
                <a>激光厅</a>
              </li>
              <li class>
                <a></a>
              </li>
            </ul>
          </li>
          <li class="tags-line">
            <div class="tags-title">影院服务:</div>
            <ul class="tags">
              <li class="active">
                <a>全部</a>
              </li>
              <li class>
                <a>可改签</a>
              </li>
              <li class>
                <a>可退票</a>
              </li>
            </ul>
          </li>
        </div>
      </div>
      <div class="cinemas-list">
        <h2 class="cinemas-list-header">
          <span>影院列表</span>
          <div class="cinemas-list-filter">
            <span class="cinemas-list-filter-title">
              <img src="http://p1.meituan.net/scarlett/af58aa7b387e1c4d26797f027733ace2309.png" />
              筛选
            </span>
            <ul class="cinemas-list-filter-info">
              <li class="filter-item" data-val="distance">
                <a>距离近</a>
              </li>
              <li class="filter-item" data-val="price">
                <a>价格低</a>
              </li>
            </ul>
          </div>
        </h2>
        <div class="cinema-cell">
          <div class="cinema-info">
            <a
              href="/cinema/1624?poi=1460949"
              class="cinema-name"
              data-act="cinema-name-click"
              data-bid="b_4tkpau4m"
              data-val="{city_id: 1, cinema_id: 1624}"
            >博纳国际影城（万寿路店）</a>
            <p class="cinema-address">地址：海淀区复兴路51号凯德晶品购物中心4层</p>
            <div class="cinema-tags">
              <span class="cinema-tags-item">改签</span>

              <span class="cinema-tags-item">折扣卡</span>
            </div>
          </div>

          <div class="buy-btn">
            <a
              href="/cinema/1624?poi=1460949"
              data-act="buy-btn-click"
              data-val="{city_id: 1, cinema_id: 1624}"
              data-bid="b_4tkpau4m"
            >选座购票</a>
          </div>

          <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red">
              <span class="stonefont">40</span>
            </span>
            <span>起</span>

            <span class="cinema-distance">20km</span>
          </div>
        </div>
        <div class="cinema-cell">
          <div class="cinema-info">
            <a>博纳国际影城（亚运村店）</a>
            <p class="cinema-address">地址：朝阳区安立路68号太阳飘亮购物中心B1层</p>
            <div class="cinema-tags">
              <span class="cinema-tags-item">改签</span>

              <span class="cinema-tags-item">折扣卡</span>

              <span class="cinema-tags-item">60帧厅</span>
            </div>
          </div>

          <div class="buy-btn">
            <a>选座购票</a>
          </div>

          <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red">
              <span class="stonefont">28</span>
            </span>
            <span>起</span>

            <span class="cinema-distance">7.7km</span>
          </div>
        </div>
        <div class="cinema-cell">
          <div class="cinema-info">
            <a
              href="/cinema/36076?poi=556199961"
              class="cinema-name"
              data-act="cinema-name-click"
              data-bid="b_4tkpau4m"
              data-val="{city_id: 1, cinema_id: 36076}"
            >博纳国际影城（大郊亭IMAX旗舰店）</a>
            <p class="cinema-address">地址：朝阳区东四环中路芳圆里IDMALL5层</p>
            <div class="cinema-tags">
              <span class="cinema-tags-item">改签</span>

              <span class="cinema-tags-item">折扣卡</span>

              <span class="cinema-tags-item">IMAX厅</span>
              <span class="cinema-tags-item">DTS:X 临境音厅</span>
              <span class="cinema-tags-item">儿童厅</span>
            </div>
          </div>

          <div class="buy-btn">
            <a>选座购票</a>
          </div>

          <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red">
              <span class="stonefont">69</span>
            </span>
            <span>起</span>

            <span class="cinema-distance">20km</span>
          </div>
        </div>
        <div class="cinema-cell">
          <div class="cinema-info">
            <a>博纳国际影城（密云IMAX店）</a>
            <p class="cinema-address">地址：密云区滨河路178号万象汇购物中心4层</p>
            <div class="cinema-tags">
              <span class="cinema-tags-item">改签</span>

              <span class="cinema-tags-item">折扣卡</span>

              <span class="cinema-tags-item">IMAX厅</span>
              <span class="cinema-tags-item">DTS:X 临境音厅</span>
              <span class="cinema-tags-item">4D厅</span>
              <span class="cinema-tags-item">60帧厅</span>
              <span class="cinema-tags-item">MX4D厅</span>
            </div>
          </div>

          <div class="buy-btn">
            <a>选座购票</a>
          </div>

          <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red">
              <span class="stonefont">42</span>
            </span>
            <span>起</span>

            <span class="cinema-distance">48km</span>
          </div>
        </div>
        <div class="cinema-cell">
          <div class="cinema-info">
            <a
              href="/cinema/43?poi=82556"
              class="cinema-name"
              data-act="cinema-name-click"
              data-bid="b_4tkpau4m"
              data-val="{city_id: 1, cinema_id: 43}"
            >博纳国际影城（方庄店）</a>
            <p class="cinema-address">地址：丰台区蒲黄榆路28号（地铁5号线、14号线C出口）</p>
            <div class="cinema-tags">
              <span class="cinema-tags-item">改签</span>

              <span class="cinema-tags-item">折扣卡</span>

              <span class="cinema-tags-item">CINITY厅</span>
            </div>
          </div>

          <div class="buy-btn">
            <a
              href="/cinema/43?poi=82556"
              data-act="buy-btn-click"
              data-val="{city_id: 1, cinema_id: 43}"
              data-bid="b_4tkpau4m"
            >选座购票</a>
          </div>

          <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red">
              <span class="stonefont">67</span>
            </span>
            <span>起</span>

            <span class="cinema-distance">22km</span>
          </div>
        </div>
        <div class="cinema-cell">
          <div class="cinema-info">
            <a
              href="/cinema/116?poi=63"
              class="cinema-name"
              data-act="cinema-name-click"
              data-bid="b_4tkpau4m"
              data-val="{city_id: 1, cinema_id: 116}"
            >博纳国际影城（朝阳门IMAX店）</a>
            <p class="cinema-address">地址：朝阳区三丰路悠唐购物中心二期B1层</p>
            <div class="cinema-tags">
              <span class="cinema-tags-item">改签</span>

              <span class="cinema-tags-item">折扣卡</span>

              <span class="cinema-tags-item">IMAX厅</span>
            </div>
          </div>

          <div class="buy-btn">
            <a
              href="/cinema/116?poi=63"
              data-act="buy-btn-click"
              data-val="{city_id: 1, cinema_id: 116}"
              data-bid="b_4tkpau4m"
            >选座购票</a>
          </div>

          <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red">
              <span class="stonefont">45</span>
            </span>
            <span>起</span>

            <span class="cinema-distance">16km</span>
          </div>
        </div>
        <div class="cinema-cell">
          <div class="cinema-info">
            <a>博纳国际影城（通州北苑店）</a>
            <p class="cinema-address">地址：通州区杨庄北里52号华联天时名苑购物中心4楼（近通州北苑地铁站）</p>
            <div class="cinema-tags">
              <span class="cinema-tags-item">改签</span>

              <span class="cinema-tags-item">折扣卡</span>
            </div>
          </div>

          <div class="buy-btn">
            <a>选座购票</a>
          </div>

          <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red">
              <span class="stonefont">65</span>
            </span>
            <span>起</span>

            <span class="cinema-distance">26km</span>
          </div>
        </div>
        <div class="cinema-cell">
          <div class="cinema-info">
            <a
              href="/cinema/5111?poi=2374984"
              class="cinema-name"
              data-act="cinema-name-click"
              data-bid="b_4tkpau4m"
              data-val="{city_id: 1, cinema_id: 5111}"
            >CGV影城（清河IMAX店）</a>
            <p class="cinema-address">地址：海淀区清河街道清河中街68号清河万象汇东区7层</p>
            <div class="cinema-tags">
              <span class="cinema-tags-item">改签</span>

              <span class="cinema-tags-item">折扣卡</span>

              <span class="cinema-tags-item">IMAX厅</span>
              <span class="cinema-tags-item">60帧厅</span>
            </div>
          </div>

          <div class="buy-btn">
            <a>选座购票</a>
          </div>

          <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red">
              <span class="stonefont">28</span>
            </span>
            <span>起</span>

            <span class="cinema-distance">8.2km</span>
          </div>
        </div>
        <div class="cinema-cell">
          <div class="cinema-info">
            <a>CGV影城（顺义ScreenX店）</a>
            <p class="cinema-address">地址：顺义区胜利街道新顺南大街8号华联购物中心4层</p>
            <div class="cinema-tags">
              <span class="cinema-tags-item">改签</span>

              <span class="cinema-tags-item">折扣卡</span>

              <span class="cinema-tags-item">60帧厅</span>
            </div>
          </div>

          <div class="buy-btn">
            <a>选座购票</a>
          </div>

          <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red">
              <span class="stonefont">34</span>
            </span>
            <span>起</span>

            <span class="cinema-distance">25km</span>
          </div>
        </div>
        <div class="cinema-cell">
          <div class="cinema-info">
            <a>CGV星星影城（奥体店）</a>
            <p class="cinema-address">地址：朝阳区奥运村街道湖景东路9号新奥购物中心B1层H1-67室</p>
            <div class="cinema-tags">
              <span class="cinema-tags-item">改签</span>

              <span class="cinema-tags-item">折扣卡</span>

              <span class="cinema-tags-item">4DX厅</span>
              <span class="cinema-tags-item">激光厅</span>
            </div>
          </div>

          <div class="buy-btn">
            <a>选座购票</a>
          </div>

          <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red">
              <span class="stonefont">50</span>
            </span>
            <span>起</span>

            <span class="cinema-distance">11km</span>
          </div>
        </div>
        <div class="cinema-cell">
          <div class="cinema-info">
            <a>CGV星星影城（颐堤港ScreenX店）</a>
            <p class="cinema-address">地址：朝阳区酒仙桥路18号颐堤港4层（将台地铁站）</p>
            <div class="cinema-tags">
              <span class="cinema-tags-item">改签</span>

              <span class="cinema-tags-item">折扣卡</span>
            </div>
          </div>

          <div class="buy-btn">
            <a>选座购票</a>
          </div>

          <div class="price">
            <span class="rmb red">￥</span>
            <span class="price-num red">
              <span class="stonefont">25</span>
            </span>
            <span>起</span>

            <span class="cinema-distance">18km</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MovieView",
  data() {
    return {};
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}
img {
  border-style: none;
}
#container {
  width: 1200px;
  margin: 0 auto;
}
.tags-panel {
  border: 1px solid #e5e5e5;
  padding: 0 20px;
  margin: 45px 0 40px 0;
  /* margin: 40px 0; */
  position: relative;
}
.tags-panel ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.tags-line {
  padding: 10px 0 !important;
}
.tags li a {
  color: #333;
  font-size: 14px;
}
.tags-title {
  height: 24px;
  line-height: 24px;
  float: left;
  color: #999;
  font-size: 14px;
}
.tags-panel ul.tags {
  margin-left: 40px;
}
.tags li {
  border-radius: 14px;
  padding: 3px 9px;
  display: inline-block;
  margin-left: 12px;
}
.tags-line-border {
  border-top: 1px dashed #e5e5e5;
}
.tags li a {
  color: #333;
  font-size: 14px;
}
.tags li.active {
  background: #f34d41;
  color: #fff;
}
.tags li:hover a {
  background: ;
  color: #f34d41;
}
.cinemas-list .cinemas-list-header {
  font-size: 18px;
  color: #333;
  border-left: 4px solid #f03d37;
  padding-left: 6px;
  line-height: 18px;
  margin: 0;
  position: relative;
}
.cinemas-list .cinema-address {
  font-size: 14px;
  line-height: 14px;
  color: #999;
}
p {
  margin: 0;
}
.cinemas-list .cinema-tags {
  margin-top: 10px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #509fc9;
  line-height: 18px;
}
.cinemas-list .cinema-tags span.cinema-tags-item {
  display: inline-block;
  border: 0.7px solid #509fc9;
  border-radius: 3px;
  padding: 0 2px;
  margin-right: 8px;
}
.cinemas-list .cinema-name {
  display: inline-block;
  font-size: 16px;
  line-height: 18px;
  color: #333;
  margin-bottom: 10px;
}
.cinemas-list .cinemas-list-filter {
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #666;
  letter-spacing: 0;
  font-weight: 400;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  background: #fff;
}
.cinemas-list .cinemas-list-filter {
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #666;
  letter-spacing: 0;
  font-weight: 400;
  cursor: pointer;
}
.cinemas-list .cinemas-list-filter-title img {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-top: -2px;
}
.cinemas-list .cinemas-list-filter-info {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 56px;
  text-align: center;
}
.cinemas-list .cinemas-list-filter-info .filter-item {
  height: 28px;
  margin: 0;
  line-height: 28px;
  width: 64px;
  padding-left: 16px;
}
.cinemas-list .cinema-cell {
  display: block;
  padding: 20px 0;
  border-bottom: 1px dashed #e5e5e5;
}
.cinemas-list .cinema-info {
  display: inline-block;
  max-width: 80%;
}
.cinemas-list .buy-btn {
  float: right;
  width: 80px;
  height: 45px;
  line-height: 45px;
  margin-left: 36px;
  margin-right: 20px;
}
.cinemas-list .buy-btn a {
  display: inline-block;
  width: 100%;
  height: 30px;
  color: #fff;
  background-color: #f03d37;
  font-size: 14px;
  line-height: 30px;
  border-radius: 100px;
  text-align: center;
  -webkit-box-shadow: 0 2px 10px -2px #f03d37;
  box-shadow: 0 2px 10px -2px #f03d37;
}
.cinemas-list .price {
  float: right;
  font-size: 12px;
  color: #999;
  height: 45px;
  line-height: 45px;
}
.cinemas-list .price .rmb {
  margin-right: -4px;
}
.cinemas-list .price .price-num {
  font-size: 16px;
  margin-right: 3px;
  font-weight: 700;
}
.list .price {
  font-size: 12px;
  color: #999;
  line-height: 45px;
}
.red {
  color: #f03d37;
}
span.cinema-distance {
  display: block;
  height: 17px;
  line-height: 17px;
  margin-top: -8px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999;
  letter-spacing: 0;
  text-align: right;
}
</style>
